<template>
  <div>
    <!-- 列表卡片 -->
    <List-card :card="cardlist" :arr="colorlist" />

    <!-- 折线图 -->
    <List @datalist="getdata" />
  </div>
</template>

<script>
import ListCard from './perject/listCrad.vue'
import List from './perject/main.vue'
import { totaldata } from '../../api/shop'
export default {
  components: {
    ListCard,
    List
  },
  data() {
    return {
      colorlist: ['#53B3E5', '#DE5598', '#33A5E0', '#1AFA29'],
      cardlist: [
        {
          id: 1,
          icon: 'icon-wenjian',
          text: '总订单',
          num: '420,000',
          name: 'totalOrder'
        },
        {
          id: 2,
          icon: 'icon-Dollar',
          text: '总销售额',
          num: '420,000',
          name: 'totalAmount'
        },
        {
          id: 3,
          icon: 'icon-renwu',
          text: '今日订单数',
          num: '420,000',
          name: 'todayOrder'
        },
        {
          id: 4,
          icon: 'icon-renminbi',
          text: '今日销售额',
          num: '420,000',
          name: 'totayAmount'
        }
      ],
      setdata: {}
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    async getlist() {
      const data = await totaldata()
      // console.log(data)

      this.cardlist.forEach(item => {
        // console.log(item)
        for (const key in data) {
          if (key === item.name) {
            item.num = data[key]
          }
        }
      })
      const obj = this.setdata

      obj.option.xAxis.data = data.xData
      obj.option.series[0].data = data.amountData
      obj.option.series[1].data = data.orderData
      obj.myChart.setOption(obj.option)
    },
    getdata(o) {
      // console.log(o, 123)
      this.setdata = o
    }
  }
}
</script>

<style lang="less" scoped>
div {
  min-width: 700px;
}
</style>
